<template>
  <view>
    <view>
      <u-top-tips ref="uTips"></u-top-tips>
      <image src="../../static/img/tgpms.png" class="tgpms"></image>
      <view class="tght-box">
        <view class="tght-title">UNIAPP开发demo</view>
      </view>
      <view class="form">
        <br />
        <u-form>
          <u-form-item
            :leftIconStyle="{
              color: '#000000',
              fontSize: '28rpx',
              'margin-right': '12rpx',
            }"
            left-icon="list"
            style="color: #000000"
            label-width="160"
            label-position="left"
            label="工作区"
            prop="workArea"
          >
            <u-input
              style="color: #000000"
              placeholder="请选择工作区"
              v-model="userInfo.workArea"
              type="select"
              @click="show = true"
            ></u-input>
          </u-form-item>
          <u-form-item
            :leftIconStyle="{
              color: '#000000',
              fontSize: '28rpx',
              'margin-right': '12rpx',
            }"
            left-icon="account"
            label-width="160"
            style="color: #000000"
            label-position="left"
            label="账号"
            prop="username"
          >
            <u-input
              style="color: #000000"
              placeholder="请输入账号"
              v-model="loginForm.username"
              type="text"
            ></u-input>
          </u-form-item>
          <u-form-item
            :leftIconStyle="{
              color: '#000000',
              fontSize: '28rpx',
              'margin-right': '12rpx',
            }"
            left-icon="lock"
            label-width="160"
            style="color: #000000"
            label-position="left"
            label="密码"
            prop="password"
          >
            <u-input
              style="color: #000000"
              placeholder="请输入密码"
              v-model="loginForm.password"
              type="password"
            ></u-input>
          </u-form-item>
          <u-form-item
            :leftIconStyle="{
              color: '#000000',
              fontSize: '28rpx',
              'margin-right': '12rpx',
            }"
            left-icon="account"
            label-width="160"
            style="color: #000000"
            label-position="left"
            label="验证码"
            prop="username"
          >
            <u-input
              style="color: #000000"
              placeholder="请输入验证码"
              v-model="loginForm.code"
              type="text"
            ></u-input>
            <image class="img-code" :src="codeImg" mode="" @tap="getCodeImg" />
          </u-form-item>
        </u-form>
        <view class="loginBtn">
          <u-button type="primary" class="btnValue" @tap="formSubmit"
            >登录</u-button
          >
        </view>
        <u-action-sheet
          :list="actionSheetList"
          v-model="show"
          @click="actionSheetCallback"
        ></u-action-sheet>
        <br />
      </view>
    </view>
  </view>
</template>

<script>
import CryptoJS from "crypto-js";
import { fetchUserInfo, getCodeImg } from "@/api/user";

//加密的私钥
let key = "12345678"; //自定义

export default {
  data() {
    return {
      show: false,
      userInfo: {
        workArea: "测试",
        workAreaCode: "TEST",
        username: "FENG_JING2",
        password: "hwoh2vyv",
      },
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        userType: "01",
        code: "",
        uuid: "",
      },
      codeImg: "",
      codeUUId: "",
      actionSheetList: [
        {
          code: "TEST",
          text: "测试",
        },
        {
          code: "MASTER",
          text: "正式",
        },
      ],
    };
  },
  methods: {
    // DES加密
    encryptByDES(message) {
      //传入加密的内容
      //把私钥转换成16进制的字符串
      var keyHex = CryptoJS.enc.Utf8.parse(key);
      //模式为ECB padding为Pkcs7
      var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
      });
      //加密出来是一个16进制的字符串
      return encrypted.ciphertext.toString();
    },
    formSubmit() {
      const _self = this;
      fetchUserInfo(this.loginForm).then((res) => {
        if (res.code === 200) {
          uni.setStorageSync("userId", this.userInfo.username);
          uni.setStorageSync("token", res.data.access_token);
          uni.setStorageSync("dataowner", res.data.dataowner);
          uni.switchTab({
            url: "/pages/index/index",
          });
        } else {
          _self.$refs.uTips.show({
            title: res.msg,
            type: "error",
            duration: "2300",
          });
          _self.getCodeImg();
        }
      });
      // uni.switchTab({
      //   url: "/pages/index/index",
      // });
    },
    // 点击actionSheet回调
    actionSheetCallback(index) {
      this.userInfo.workArea = this.actionSheetList[index].text;
      this.userInfo.workAreaCode = this.actionSheetList[index].code;
    },
    async getCodeImg() {
      const res = await getCodeImg();
      if (res.code === 200) {
        this.codeImg = "data:image/gif;base64," + res.img;
        this.loginForm.uuid = res.uuid;
      }
    },
  },
  onLoad: function (e) {
    this.getCodeImg();
    if (e.token !== undefined && !e.token) {
      uni.showToast({
        title: "会话已过期，请重新登录",
        icon: "none",
        duration: 2000,
      });
    }
  },
};
</script>

<style>
.tght-box {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding-top: 20rpx;
}

.tght-title {
  width: 400rpx;
  height: 40rpx;
  font-size: 36rpx;
  font-weight: 600;
  font-family: "宋体";
  color: #0083ff;
  margin: 0 auto 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.avatorWrapper {
  height: 30vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.avator {
  width: 200upx;
  height: 200upx;
  overflow: hidden;
}
.avator .img {
  width: 100%;
}
.form {
  z-index: -1;
  padding: 0 100upx;
  margin-top: 70px;
}
.inputWrapper {
  width: 100%;
  height: 80upx;
  background: white;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 0 20px;
  margin-top: 25px;
}
.inputWrapper .input {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 15px;
}
.btnValue {
  font-family: "宋体";
  width: 100%;
  height: 80upx;
  background: #4481fe;
  border-radius: 50upx;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e6e6e6;
}
.tgpms {
  height: 168rpx;
  width: 168rpx;
  display: block;
  margin: 138rpx auto 0 auto;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}
.img-code {
  width: 212rpx;
  height: 80rpx;
}
</style>
